<template>
  <div class="earth-map-page">
    <h1 class="page-title">3D世界地图可视化</h1>
    <EarthMap />
  </div>
</template>

<script setup lang="ts">
// @note 最完善的案例了
import EarthMap from './EarthMap.vue'
</script>

<style scoped>
.earth-map-page {
  width: 100%;
  height: 100vh;
  background: linear-gradient(135deg, #000b1a 0%, #001633 100%);
  overflow: hidden;
  position: relative;
}

.page-title {
  position: absolute;
  top: 20px;
  left: 0;
  right: 0;
  text-align: center;
  color: #4a90e2;
  font-size: 28px;
  margin: 0;
  z-index: 100;
  text-shadow: 0 0 10px rgba(74, 144, 226, 0.7);
}
</style>